<template>
  <div class="chat">
    <van-nav-bar title="购物车"
                 right-text="管理"
                 :left-arrow=false
                 :fixed=true
                 @click-right="handleManagement" />
    <div class="char-goods"
         v-if="goods.length">
      <van-checkbox-group v-model="result"
                          @change='handleCheckGroup'>
        <div v-for="item in goods"
             :key="item.id"
             class="check-card">
          <van-checkbox :key="item.id"
                        checked-color="#ee0a24"
                        :name="item.id">
          </van-checkbox>
          <van-card :key="item.id"
                    :tag="item.tag"
                    :price="item.price"
                    :desc="item.desc"
                    :title="item.title"
                    :thumb="item.thumb"
                    :origin-price="item.originPrice"
                    @click-thumb="handleGoodsDetail(item.id)">
            <div slot="tags">
              <van-tag round
                       type="warning">{{item.goodTypeName}}</van-tag>
            </div>
            <div slot="footer">
              <van-stepper v-model="item.amount"
                           @change='handleChangeGoods(item.amount,item.price)' />
            </div>
          </van-card>
        </div>
      </van-checkbox-group>
    </div>
    <div class="blankChat"
         v-else>
      <img src="../../assets/imgs/cart-empty.png"
           width="50%"
           height="50%"
           alt="空购物车">
      <p class="title">购物车竟然是空的!</p>
      <van-button plain
                  type="danger"
                  @click='handleToIndex'>去逛逛</van-button>
    </div>
    <van-submit-bar :price="totalPrice"
                    button-text="提交订单"
                    @submit="handleSubmitOrder">
      <van-checkbox v-model="checkedAll"
                    checked-color="#ee0a24"
                    @click="hadleCheckedAll">全选</van-checkbox>
      <!-- <span slot="tip">
        你的收货地址不支持同城送, <span>修改地址</span>
      </span> -->
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  name: 'chat',
  data () {
    return {
      checkedAll: false,
      result: [],
      totalPrice: 0,
      goods: [
        {
          id: 1,
          num: 0,
          tag: '',
          price: 4056,
          desc: "【二手9成新】Apple iPhone X 苹果x 二手手机（送一年碎屏险） 深空灰 64G 全网通",
          title: "iPhone X",
          thumb: "https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp",
          originPrice: 5999,
          goodTypeName: "手机",
          amount: 1
        },
        {
          id: 2,
          num: 100,
          tag: '促销',
          price: 2.90,
          desc: "男士衬衫",
          title: "内衣",
          thumb: "https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp",
          originPrice: 10.00,
          goodTypeName: "男装",
          amount: 2
        },
        {
          id: 3,
          num: 5,
          tag: '',
          price: 2.00,
          desc: "戴尔DELLXPS13.3英寸英特尔酷睿i5超轻薄窄边框笔记本电脑(i5-8250U 8G 256G PCIe 72色域 背光 2年全智)银",
          title: "戴尔笔记本",
          thumb: "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp",
          originPrice: 10.00,
          goodTypeName: "电脑",
          amount: 1
        },
        {
          id: 4,
          num: 70,
          tag: '促销',
          price: 2.00,
          desc: "男士衬衫",
          title: "内衣",
          thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg",
          originPrice: 10.00,
          goodTypeName: "男装",
          amount: 1
        },
        {
          id: 5,
          num: 168,
          tag: '促销',
          price: 4090,
          desc: "微星（MSI）MPG Z390 GAMING PRO CARBON 暗黑板主板+英特尔（Intel） i7-9700K 酷睿八核 CPU 板U套装",
          title: " i7-9700K CPU",
          thumb: "https://img12.360buyimg.com/jdcms/s300x300_jfs/t27091/115/2577132710/306881/247bd325/5c06243eN7edaa545.jpg.webp",
          originPrice: 4090,
          goodTypeName: "电脑",
          amount: 1
        }
      ]
    }
  },
  components: {

  },
  created () {

  },
  mounted () {

  },
  methods: {
    /* 头部管理按钮 */
    handleManagement () {
      this.$toast('点击管理按钮');
    },

    /* 提交订单 */
    handleSubmitOrder () {
      if (!this.totalPrice) {
        this.$toast('请至少选择一件物品');
      } else {
        this.$toast(`订单已提交，共计${this.totalPrice / 100}元`);
      }
    },
    /* 跳转到商品明细页面 */
    handleGoodsDetail (id) {
      this.$router.push({
        name: 'goodsDetail',
        params: { id: id }
      })
    },
    /* 改变数量 */
    handleChangeGoods () {
      this.totalPrice = 0;
      for (let i = 0; i < this.result.length; i++) {
        for (let v of this.goods) {
          if (v.id === this.result[i]) {
            this.totalPrice += v.amount * v.price;
          }
        }
      }

      this.totalPrice *= 100;
    },
    /* 跳转到主页面 */
    handleToIndex () {
      this.$router.replace({
        name: 'home'
      })
    },
    /* 全选事件 */
    hadleCheckedAll () {
      if (!this.checkedAll) {
        this.totalPrice = 0;
        /* 获取到购物车数据后计算总共商品的价格 */
        for (let v of this.goods) {
          this.totalPrice += v.amount * v.price;
          this.result.push(v.id);
        }
        this.totalPrice *= 100;
        /* 数组去重 */
        this.result = Array.from(new Set(this.result));
      } else {
        this.totalPrice = 0;
        this.result = [];
      }
    },
    /* 复选框组选中事件 */
    handleCheckGroup (value) {
      if (value.length === this.goods.length) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
      /* 重新计算价格 */
      this.totalPrice = 0;
      for (let i = 0; i < value.length; i++) {
        for (let v of this.goods) {
          if (v.id === value[i]) {
            this.totalPrice += v.amount * v.price;
          }
        }
      }
      this.totalPrice *= 100;
    }
  }
}
</script>

<style scoped lang="css">
.chat {
  position: relative;
  height: calc(100vh + 150px);
  background-color: #f7f7f7;
}
.char-goods {
  margin: 90px 0 210px;
}

.van-checkbox {
  margin-left: 20px;
}
.van-submit-bar {
  /* position: absolute; */
  bottom: 90px;
}

.blankChat {
  margin: auto;
  padding: 300px 0;
  text-align: center;
}
.blankChat .title {
  font-size: 36px;
  color: #999;
  margin: 30px 0;
}
/* 复选框与卡片组合布局 */
.check-card {
  display: flex;
  justify-content: left;
}
.check-card .van-checkbox {
  margin: 0 20px;
}
.check-card .van-card {
  width: 85%;
}
</style>
